<template>
  <a-card  id="table" :bordered="false">
    <a-table
      :columns="columns"
      :rowKey="record => record.login.uuid"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template slot="name" slot-scope="name">{{ name.first }} {{ name.last }}</template>
    </a-table>
  </a-card>
</template>
<script>
import reqwest from "reqwest";
const columns = [

  {
    title: "设备名",
    dataIndex: "gender"

    // width: '20%',
  },
  {
    title: "设备编号",
    dataIndex: "email"
  },
  {
    title: "告警名称",
    dataIndex: "email"
  },
  {
    title: "告警级别",
    dataIndex: "email"
  },
  {
    title: "告警内容",
    dataIndex: "email"
  },
  {
    title: "告警时间",
    dataIndex: "email"
  },
  {
    title: "修复时间",
    dataIndex: "email"
  }
];

export default {
  mounted() {
    this.fetch();
  },
  data() {
    return {
      data: [],
      pagination: {},
      loading: false,
      columns
    };
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters
      });
    },
    fetch(params = {}) {
      console.log("params:", params);
      this.loading = true;
      reqwest({
        url: "https://randomuser.me/api",
        method: "get",
        data: {
          results: 10,
          ...params
        },
        type: "json"
      }).then(data => {
        const pagination = { ...this.pagination };
        // Read total count from server
        // pagination.total = data.totalCount;
        pagination.total = 200;
        this.loading = false;
        this.data = data.results;
        this.pagination = pagination;
      });
    }
  }
};
</script>

<style scoped >
#table{
  background: rgba(255,255,255,1);
  margin-left:-30px; 
}

</style>
